<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="Mycanvas" width="1000" height="500"></canvas>
		<script type="text/javascript">
			var canvas=document.getElementById("Mycanvas");
			var ctx=canvas.getContext("2d");
			ctx.fillStyle="chocolate";
			ctx.fillRect(0,0,1000,500);
			var arcArr=[
			[20,100,20,5,0,"red"],//x,y,R,vx,vy,color
			[20,100,20,10,1,"green"],
			[20,100,20,8,2,"yellow"]
			];
			var min1=0;
			var max1=50;
			setInterval(function(){
				arcArr.push([20,100,20,Math.floor(Math.random()*10),Math.floor(Math.random()*10),"RGB("+Math.floor(Math.random()*256)+ ","+ Math.floor(Math.random()*256) + ","+ Math.floor(Math.random()*256)+")"]);
			},300);

			setInterval(function(){
				ctx.fillStyle="rgba(80,80,80,0.3)";
				ctx.fillRect(0,0,1000,500);
				for(var i=0;i<arcArr.length;i++){
				ctx.beginPath();
				ctx.fillStyle=arcArr[i][5];
				ctx.arc(arcArr[i][0],arcArr[i][1],arcArr[i][2],0,2*Math.PI);
				ctx.fill();
				arcArr[i][1]=arcArr[i][1]+arcArr[i][4];//y
				arcArr[i][4]=arcArr[i][4]+1;
				arcArr[i][0]=arcArr[i][0]+arcArr[i][3];//x
				if(arcArr[i][1]>500-arcArr[i][2])
				{
					arcArr[i][4]=-arcArr[i][4];
					arcArr[i][4]=arcArr[i][4]*0.8;
					arcArr[i][1]=500-arcArr[i][2];
				}
				if(arcArr[i][0]>1000-arcArr[i][2])
				{
					arcArr[i][3]=-arcArr[i][3];
					arcArr[i][0]=1000-arcArr[i][2];
				}
				if(arcArr[i][0]<=arcArr[i][2])
				{
					arcArr[i][3]=-arcArr[i][3];
					arcArr[i][0]=arcArr[i][2];
				}	
				}
				
			},20);
			
			
			
			</script>
	</body>
</html>
